<template>
  <div>
    <zc-table
      v-bind="config"
      :request="getUserListInfo"
      :total="total"
      ref="tableRef"
    >
      <template #header>
        <el-button type="primary" class="header" @click="addOrEditUser('add')"
          >添加用户</el-button
        >
      </template>
      <template #option="scoped">
        <el-button
          link
          type="primary"
          @click="addOrEditUser('edit', scoped.row)"
          >编辑</el-button
        >
        <el-popconfirm
          width="220"
          confirm-button-text="确定"
          cancel-button-text="取消"
          :icon="QuestionFilled"
          icon-color="red"
          title="你确定要删除吗?"
          @confirm="confirmEvent(scoped)"
        >
          <template #reference>
            <el-button type="danger" link>删除</el-button>
          </template>
        </el-popconfirm>
      </template>
    </zc-table>
    <zc-dialog v-bind="isConfig" v-model:visible="visible"></zc-dialog>
  </div>
</template>

<script setup lang="ts">
import { deleteUser, getUserList, UserListParmas } from "@/api/user";
import { tableConfig } from "@/config/tableConfig";
import { QuestionFilled } from "@element-plus/icons-vue";
import { dConfig } from "./dialogConfig";
const tableRef = ref<any>();
const total = ref(0);
const visible = ref(false);
const isDialog = ref("");
const lineData = ref<UserListParmas>({});

const config = tableConfig({
  column: [
    {
      prop: "username",
      label: "用户名",
      show: false,
      minWidth: "200",
    },
    {
      prop: "phone",
      label: "手机号",
      type: "select",
      filter: true,
      minWidth: "200",
    },
    {
      prop: "option",
      label: "操作",
      slotName: "option",
      show: false,
    },
  ],
  showIndexColumn: true,
  paginationAlign: "right",
});
// 删除用户
const confirmEvent = async (scope: any) => {
  try {
    const res = await deleteUser(scope.row.id);
    ElMessage.success("删除成功！");
    tableRef.value?.reload();
  } catch (e) {
    ElMessage.error("删除失败");
  }
};

const getUserListInfo = async (params: UserListParmas) => {
  const res = await getUserList(params);
  total.value = res.total;
  return res.records;
};
const addOrEditUser = (name: string, row?: UserListParmas) => {
  visible.value = true;
  isDialog.value = name;
  if (row) {
    lineData.value = row;
  }
};
const isConfig = computed(() => {
  return dConfig(lineData.value, isDialog.value, tableRef.value);
});
</script>

<style scoped lang="scss">
.header {
  margin-bottom: 20px;
}
</style>
